<template>
	<el-col :span="componentModel.col*6" @click.stop="onClickHandler"
		:class="[selected ?'col-selected-state' : 'col-normal-state']" style="position: relative;">
		<i class="el-icon-rank drag-widget" style="position: absolute;left: 0px;top:0px;z-index: 100;" v-show="selected"></i>
		<el-row>
			<el-col :span="8" class="field-label-div" v-if="!componentModel.noLabel">
				<label class="field-label">{{componentModel.labelExpression}}</label>
			</el-col>
			<el-col :span="componentModel.fieldcol">
				<img :style="componentModel.cssStyle" src="@/assets/user-slash.png" />
			</el-col>
		</el-row>
	</el-col>

</template>

<script>
	import utils from '@/utils/utils.js';
	import formDesignerUtil from '@/utils/formDesignerUtil.js';
	export default {
		name: "DesignImageComponent",
		props: [
			"componentModel"
		],
		beforeMount() {
			if (this.componentModel.cssStyle == undefined || this.componentModel.cssStyle == null) {
				formDesignerUtil.setComponentModelPropValue(this.componentModel,"cssStyle","width:40px;height:66px;");
			}
			formDesignerUtil.setComponentModelDefaultFieldValues(this.componentModel);
		},
		data() {
			return {
				selected: false,
				"propertySet": [{
						"key": "ID",
						"label": "ID",
						"editor": "label"
					},
					{
						"key": "dataSource",
						"label": "数据源",
						"editor": "select"
					},
					{
						"key": "dataField",
						"label": "数据域",
						"editor": "text"
					},
					{
						"key": "varName",
						"label": "变量名",
						"editor": "text"
					},
					{
						"key": "labelExpression",
						"label": "标签",
						"editor": "text"
					},
					{
						"key": "col",
						"label": "列数",
						"editor": "text"
					},
					{
						"key": "visible",
						"label": "显示逻辑",
						"editor": "textarea"
					}, {
						"key": "cssStyleExpression",
						"label": "cssStyle",
						"editor": "textarea",
					}, {
						"key": "cssClassExpression",
						"label": "cssClass",
						"editor": "textarea",
					}
				]
			}
		},
		inject: ['children'],
		mounted() {
			this.children.push(this);
		},
		beforeUnmount() {
			utils.removeArrayElement(this.children, this);
		},
		methods: {
			onClickHandler() {
				formDesignerUtil.componentClickHandler(this);
			},
			getPropertyValue(propertyKey) {
				if(propertyKey=="ID"){
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"id");
				}else if(propertyKey=="col"){
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"col");
				}else if(propertyKey=="labelExpression"){
					return formDesignerUtil.getComponentModelPropValue(this.componentModel,"labelExpression");
				}
				return formDesignerUtil.getComponentModelCommonValue(this.componentModel,propertyKey);
			},
			setPropertyValue(propertyKey, propertyValue) {
				formDesignerUtil.setComponentModelCommonValue(this.componentModel,propertyKey, propertyValue);
				if(propertyKey=="col"){
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"col",parseInt(propertyValue));
				}else if(propertyKey=="labelExpression"){
					formDesignerUtil.setComponentModelPropValue(this.componentModel,"labelExpression",propertyValue);
				}
			},
			setSelected(selected) {
				this.selected = selected;
			}
		}
	}
</script>

<style>
</style>
